<template>
  <div>
    <NavHeader></NavHeader>
    <NavBread>
      <span>商品信息</span>
    </NavBread>
    <div class="container">
      <div class="info-backgroundImg">
        <div class="goods-img">
          <div class="wrapper">
            <swiper :options="swiperOption" class="swiper-container">
              <!-- slides -->
              <swiper-slide
                class="swiper-item"
                v-for="(item, index) of swiperList"
                :key="index"
              >
                <img class="swiper-img" v-lazy="item" alt="img" height="377px" width="100%" />
              </swiper-slide>
              <!-- Optional controls ,显示小点-->
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
        </div>
      </div>
      <div class="goods-info">
        <div class="goods-info-item">
          <strong>名称</strong>
          <p>{{this.goodsData.productName}}</p>
        </div>
        <div class="goods-info-item">
          <strong>商品描述</strong>
          <p>{{this.goodsData.presentation}}</p>
        </div>
        <div class="goods-info-item">
          <strong>售价</strong>
          <p>{{this.goodsData.salePrice}}</p>
        </div>
        <div class="goods-info-item">
          <strong>库存</strong>
          <p>{{this.goodsData.productNum}}</p>
        </div>
      </div>
    </div>
    <NavFooter></NavFooter>
  </div>
</template>

<script>
import '../assets/css/checkout.css'
import NavHeader from '../components/Header'
import NavFooter from '../components/NavFooter'
import NavBread from '../components/NavBrand'
import Modal from '../components/Model'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data () {
    return {
      swiperOption: {
        // 参数选项,显示小点
        pagination: '.swiper-pagination',
        // 循环
        loop: true,
        // 每张播放时长3秒，自动播放
        autoplay: 2000,
        // 滑动速度
        speed: 1000
        // delay:1000
      },
      // 三张轮播，使用变量循环
      goodsData: {},
      swiperList: ''
    }
  },
  components: {
    NavHeader,
    NavFooter,
    NavBread,
    Modal,
    swiper,
    swiperSlide
  },
  mounted () {
    this.goodsData = this.$store.state.checkedGoods
    this.init()
  },
  methods: {
    init () {
      let list = []
      const {prouctDetailImgs, swiperImgs} = { ...this.goodsData }
      list = prouctDetailImgs.concat(swiperImgs)
      this.swiperList = list
    }
  }
}
</script>

<style lang="css" scoped>
.info-backgroundImg {
  width: 1200px;
  height: 500px;
  background-color: red;
  background: url("../assets/goods-detail.png") no-repeat;
  background-position: 170px 0;
  position: relative;
}
.goods-img {
  position: absolute;
  left: 303px;
  top: 55px;
  width: 600px;
  height: 377px;
  background-color: #fff;
  overflow: hidden;
}
.goods-img .wrapper {
  width: 600px;
  height: 377px;
}
.goods-info {
  box-sizing: border-box;
  width: 700px;
  height: 220px;
  margin: 0 auto;
  font-size: 20px;
  padding: 20px;
  border-radius: 50px;
  background: #e6eef4;
  box-shadow:  20px 20px 60px #c4cacf,
              -20px -20px 60px #ffffff;
}
p {
  display: inline-block;
}
.goods-info-item {
  margin: 10px;
  text-align: left;
}
</style>
